// pages/toolPages/cut/wordCut.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        words: ['', '', '', '', '', '', '', '', ''],
        wordsString: "还是九宫格最酷炫!",
        backgroundColor: "white",
        fontColor: "black",
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        var sp = this.data.wordsString.split("");
        this.setData({words: sp})
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    },
    changeBGColor(e){
        this.setData({backgroundColor: e.currentTarget.dataset.color})
    },
    changeFTColor(e){
        this.setData({fontColor: e.currentTarget.dataset.color})
    },
    changeWords(e){
        this.setData({wordsString: e.detail.value})
        var sp = e.detail.value.split("");
        this.setData({words: sp});
    },
    savePics: function(){
        var ts = this;
        wx.createSelectorQuery() //此方法等于获取页面所有节点
            .select('#canvas1') //类似原生JS的选择器,这里根据id
            .fields({ node: true, size: true })//获取到的节点属性配置,node是否返回实例,size是否返回尺寸大小尺寸
            .exec((res)=>{ //获取之后的回调
                console.log("canvas1 res ", res)
                // Canvas 对象
                const canvas = res[0].node
                const ctx = canvas.getContext('2d');
                const dpr = wx.getSystemInfoSync().pixelRatio;
                canvas.width = 360 * dpr;
                canvas.height = 360 * dpr;
                console.log(canvas.width, canvas.height);
                const bgc = ts.data.backgroundColor;
                const ftc = ts.data.fontColor;
                wx.showLoading({
                  title: '正在保存图片',
                })
                for (let index = 0; index < 9; index++) {
                    var word = "";
                    if (index<ts.data.words.length){
                        word = ts.data.words[index];
                    }
                    
                    ctx.clearRect(0, 0, res[0].width, res[0].height);
                    ctx.fillStyle = bgc;
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    ctx.font = 'bold 800px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillStyle = ftc;
                    console.log(ftc);
                    console.log(bgc);
                    ctx.fillText(word, (canvas.width/2), (canvas.height/2));
                    wx.canvasToTempFilePath({
                        canvas: canvas,
                        filePath: 'jpg',
                        success(res){
                            console.log(res);
                            wx.saveImageToPhotosAlbum({
                              filePath: res.tempFilePath,
                              success(res){
                                  if (index == 8){
                                      wx.hideLoading()
                                      wx.showToast({
                                        title: '保存成功',
                                        icon: 'success',
                                        duration: 1500,
                                      })
                                  }
                              }
                            })
                        },
                        fail(res){
                            console.log(res);
                        }
                    })
                }

            })
    }
})